<template>
  <!--案场首页待办-->
  <ul class="task flex">
    <li
      class="hand flex"
      @click="linkTaskPage('myUDealTask')"
      v-if="isbuildFlag == 'buildpage' ? unlocking('0108080000') : unlocking('0305000000')"
      style="margin-right: 0.5%">
      <img src="@/assets/images/myUDealTask.png" class="icon-png">
      <div class="task-content">
        <p class="label">我的待办</p>
        <p v-if="taskInfo.myTaskNumbers" class="task-text" :title="`你有${taskInfo.myTaskNumbers}个待办，请及时处理以免扣分`" >
          你有
          <span class="num">{{ taskInfo.myTaskNumbers }}个</span>
          待办，请及时处理以免扣分
        </p>
        <p v-else class="no-task">暂无待办任务</p>
      </div>
    </li>
    <li
      class="hand flex"
      v-if="isbuildFlag == 'buildpage' ? unlocking('0108090000') : unlocking('0306000000')"
      @click="linkTaskPage('buildUDealTask')"
      style="margin-right: 0.5%">
      <img src="@/assets/images/buildUDealTask.png" class="icon-png">
      <div class="task-content">
        <p class="label">{{ isbuildFlag == 'buildpage' ? '案场待办' : '其他人员待办' }}</p>
        <p
          v-if="isbuildFlag == 'buildpage' ? taskInfo.buildingTaskNumbers : taskInfo.adminNumbers"
          class="task-text"
          :title="`其他人员共有${isbuildFlag == 'buildpage'? taskInfo.buildingTaskNumbers : taskInfo.adminNumbers}个待办，您可代为完成或提醒完成`" 
          >
          其他人员共有
          <span class="num">
            {{ isbuildFlag == 'buildpage' ? taskInfo.buildingTaskNumbers : taskInfo.adminNumbers }}个
          </span>
          待办，您可代为完成或提醒完成
        </p>
        <p v-else class="no-task">暂无待办任务</p>
      </div>
    </li>
    <li
      class="hand flex"
      v-if="isbuildFlag == 'buildpage' ? unlocking('0108100000') : unlocking('0307000000')"
      @click="linkTaskPage('processApproval')"
      style="margin-right: 0.5%">
      <img src="@/assets/images/processApproval.png" class="icon-png">
      <div class="task-content">
        <p class="label">我的待审批流程</p>
        <p  v-if="taskInfo.processApprovalNumbers" class="task-text"
          :title="`${isbuildFlag == 'buildpage'?'本案场':''}共有${taskInfo.processApprovalNumbers}个待审批流程，请及时审批`">
          <span v-if="isbuildFlag == 'buildpage'">本案场</span>共有
          <span class="num">{{ taskInfo.processApprovalNumbers }}个</span>
          待审批流程，请及时审批
        </p>
        <p v-else class="no-task">暂无待审批流程</p>
      </div>
    </li>
    <li
      class="hand flex"
      v-if="isbuildFlag == 'buildpage' ? unlocking('0108120000') : unlocking('0309000000')"
      @click="linkTaskPage('otherProcessApproval')">
      <img src="@/assets/images/otherProcessApproval.png" class="icon-png">
      <div class="task-content">
        <p class="label">其他人员待审批流程</p>
        <p  v-if="taskInfo.otherProcessApprovalNumbers" class="task-text"
          :title="`${isbuildFlag == 'buildpage'?'本案场':''}共有${taskInfo.otherProcessApprovalNumbers}个进行中的他人审核流程`"
        >
          <span v-if="isbuildFlag == 'buildpage'">本案场</span>共有
          <span class="num">{{ taskInfo.otherProcessApprovalNumbers }}个</span>
          进行中的他人审核流程
        </p>
        <p v-else class="no-task">暂无其他人员待审批流程</p>
      </div>
    </li>
  </ul>
</template>
<script>
  import homeMgr from '@/biz/buildingHome/home'
  import workMgr from '@/biz/work/index'

  export default {
    data() {
      return {
        taskInfo: {
          buildingInfo: [],
          buildingNumbers: 0,
          adminNumbers: 0,
          buildingTaskNumbers: 0,
          myTaskNumbers: 0,
          processApprovalNumbers: 0,
          taskNumbers: 0,
          otherProcessApprovalNumbers:0
        },
        isbuildFlag: 'buildpage'
      }
    },
    computed: {},
    watch: {},
    methods: {
      linkTaskPage(showTab) {
        if (showTab == 'myUDealTask' && this.taskInfo.myTaskNumbers == 0) {
          this.$Message.info('暂无待办任务！')
          return false
        }
        if (
          showTab == 'buildUDealTask' &&
          ((this.isbuildFlag == 'buildpage' && this.taskInfo.buildingTaskNumbers == 0) ||
            (this.isbuildFlag != 'buildpage' && this.taskInfo.adminNumbers == 0))
        ) {
          this.$Message.info('暂无其他待办任务！')
          return false
        }
        if (showTab == 'processApproval' && this.taskInfo.processApprovalNumbers == 0) {
          this.$Message.info('暂无待审批流程！')
          return false
        }
        if (showTab == 'otherProcessApproval' && this.taskInfo.otherProcessApprovalNumbers == 0) {
          this.$Message.info('暂无他人待审批流程！')
          return false
        }
        this.$router.push({
          name: this.$tool.getStorage('isbuildFlag') == 'buildpage' ? 'taskListPage' : 'taskListPageWork',
          params: {
            showTab: showTab
          }
        })
      },
      // 待办任务
      getTaskHeadInfoForWeb() {
        let params = {}
        let req = ''
        this.isbuildFlag = this.$tool.getStorage('isbuildFlag')

        if (this.$tool.getStorage('isbuildFlag') == 'buildpage') {
          params = {
            buildingId: this.$dt.buildInfo().housesId
          }
          req = homeMgr.getTaskHeadInfoForWeb(params)
        } else {
          req = workMgr.getTaskHeadInfoForOrg(params)
        }

        req
          .then((res) => {
            this.taskInfo = res
          })
          .catch((err) => {
            this.taskInfo = {
              buildingInfo: [],
              buildingNumbers: 0,
              adminNumbers: 0,
              buildingTaskNumbers: 0,
              myTaskNumbers: 0,
              processApprovalNumbers: 0,
              taskNumbers: 0,
              otherProcessApprovalNumbers:0
            }
          })
      }
    },
    created() {},
    mounted() {}
  }
</script>
<style lang="scss" scoped>
  .task {
    margin-bottom: 1.2%;
    justify-content: start;

    li {
      padding: 10px 20px;
      background-color: #fff;
      width: 33%;
      height: 90px;
      border-radius: 5px;

      .task-content{
        margin-left: 20px;
        display: flex;
        flex-wrap: wrap;
      }

      .label {
        font-size: 16px;
        color:#333;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }

      .num {
        color: #333;
        font-size: 28px;
        line-height: 26px;
        font-weight: 500;
      }
      .icon-png{
        width: auto;
        height: auto;
      }
      .no-task,
      .task-text {
        line-height: 20px;
        font-size: 14px;
        color: #999;
        width: 100%;
        overflow : hidden;
        display : -webkit-box;
        -webkit-box-orient : vertical;
        -webkit-line-clamp : 2;
      }
    }
  }
</style>
